<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5-2022-10-10-lidare.css">
</head>
<body>
    <script src="./data/5-2022-10-10-lidare.js"></script>
    <script>
        window.onload = function () {
            var header = document.createElement("div");
            header.classList.add("header");
            var content = document.createElement("div");
            content.classList.add("content");
            document.getElementsByTagName("body")[0].appendChild(header);
            document.getElementsByTagName("body")[0].appendChild(content);
            for (var i = 0; i < tabs.length; i++) {
                var div = document.createElement("div");
                div.classList.add("header-item");
                div.setAttribute("data-type", tabs[i].type)
                if (i == 0) {
                    div.classList.add("active");
                }
                var first = document.createElement("div");
                first.classList.add("header-item-first");
                first.textContent = tabs[i].title;
                div.appendChild(first);
                var sec = document.createElement("div");
                sec.classList.add("header-item-sec");
                sec.textContent = tabs[i].subTitle;
                div.appendChild(sec);
                header.appendChild(div);
                //绑定事件
                div.onclick = function () {
                    document.getElementsByClassName("active")[0].classList.remove("active");
                    this.classList.add("active");
                    content.innerHTML = "";
                    for (var key in products) {
                        if (this.dataset.type === key) {
                            //遍历写入
                            var html = "";
                            for (var j = 0; j < products[key].length; j++) {
                                html += `<div class="content-item ${(j + 1) % 5 == 1 ? "ma-left" : ""} ${(j + 1) % 5 === 0 ? "ma-right" : ""}">
                                    <div class="content-item-img">
                                        <img src="${products[key][j].img}" alt="">
                                    </div>
                                    <div class="introduce">
                                        <span class="proprietary">自营</span>
                                        ${products[key][j].title}
                                    </div>
                                    <div class="content-item-footer">
                                        <div class="price">￥<span>${products[key][j].price.split(".")[0]}.</span>${products[key][j].price.split(".")[1]}</div>
                                        <div class="content-item-footer-right">
                                            ${products[key][j].isPlus ? `<div class="price-Plus">￥${products[key][j].plusPrice}</div><div class="little-img">
                                                <img class="img" src="${plusImg}" alt="">
                                            </div>` : ""}
                                            ${products[key][j].isSubtag ? `<div class="full-reduction">${products[key][j].subtag}</div>` : ""}
                                        </div>
                                    </div>
                                </div>`;
                            }
                            content.innerHTML = html;
                        }
                    }
                }
                if (i == 0) div.onclick();
            }
        }
    </script>
</body>

</html>